<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
</head>
<body>
<h1>this is chat page!</h1>

<div>发送消息</div>
<input type="text" id="msgContent">
<input type="button" value="发送" onclick="CHAT.chat()">

<div>接收消息:</div>
<div id="receiveMsg" style="border-right: 1px solid red;"></div>
<script type="application/javascript">
    window.CHAT = {
        socket: null,
        init:function () {
            if(window.WebSocket){
                CHAT.socket = new WebSocket("ws://192.168.0.135:8888/ws");
                CHAT.socket.onopen = function () {
                    console.log("connect success!")
                };
                CHAT.socket.onclose = function () {
                    console.log("connect close!")
                };
                CHAT.socket.onerror = function () {
                    console.log("connect error!")
                };
                CHAT.socket.onmessage = function (e) {
                    console.log("receive message: \n");
                    var receiveMsg = document.getElementById("receiveMsg");
                    var html = receiveMsg.innerHTML;
                    receiveMsg.innerHTML = html + "</br>" + e.data;
                };
            }else{
                alert("浏览器不支持websocket协议。。。")
            }
        },
        chat:function () {
            var msg = document.getElementById("msgContent");
            CHAT.socket.send(msg.value);
            CHAT.socket.addEventListener('open', function(){

            });
            console.log(msg)
        }

    };
    CHAT.init()
</script>
</body>
</html>